<template>
  <div  class="productProcess">
   <div style="color: aliceblue;margin-top: 10px;font-weight: 700;font-size: 17px;">【生产订单信息】</div>
         <div class="table_body">
                 <div class="table_th">
                     <div class="tr2 th_style">关联订单</div>
                     <div class="tr1 th_style">产品名称</div>
                     <div class="tr3 th_style">交货日期</div>
                     <div class="tr4 th_style">订单数量</div>
                     <div class="tr5 th_style">完成数量</div>
                 </div>
                 </div>
   <vue-seamless-scroll
           :data="Undelivered"
           :class-option="classOption"
           class="seamless-warp"
         >
          <div class="table_main_body">
           <ul class="table_inner_body">
             <li class="table_tr" v-for="(item, index) in Undelivered" :key="index">
               <span class=" trs1"> {{ item.produce_code}}</span>
               <span class=" trs2"> {{ item.product_name}}</span>
               <span class=" trs3"> {{ item.delivery_time}}</span>
               <span class=" trs4"> {{ item.produce_total}}</span>
               <span class=" trs5"> {{ item.complete_num}}</span>
             </li>
           </ul>
          </div>
 </vue-seamless-scroll>
  </div>
 </template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  name: "Example04Basic",
  components: {
    vueSeamlessScroll,
  },
  props:{
      Undelivered:{
                type:Array,
                isGetData:false
            }
        },
  data() {
    return {
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          date: "2017-12-16",
        },
      ],
      classOption:{
        singleHeight: 49,
        waitTime: 2000
    }
    };
  },
};
</script>

<style  scoped>
.seamless-warp {
    height: 490px;
    overflow: hidden;
  }
  
  .table_body {
  width: 100%;
}
.table_th {
  width: 100%;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.tr {
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
  font-size: 12px;
}
.tr1 {
  width: 42%;
}
.tr2 {
  width: 38%;
}
.tr3 {
  width: 20%;
}
.tr4 {
  width: 18%;
}
.tr5 {
  width: 20%;
}
 
.th_style {
  color: rgb(0, 221, 253);
  font-weight: bold;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 5px;
  text-align: center;
}
.table_tr {
  display: flex;
  height: 40px;
  line-height: 40px;
  color: #eee;
  font-size: 15px;
  background: rgba(3, 145, 167, 0.1);
  border: 1px solid rgb(4, 114, 131);
  margin-top: 7px;
  /* margin: 7px; */
}

.table_tr .trs1 {
   width: 150px;
   margin-left: 20px;
   white-space: nowrap;
   font-size: 12px;
}
.table_tr .trs2 {
   width: 180px;
   white-space: nowrap;
   text-align: center;
   font-size: 12px;
}
.table_tr .trs3 {
   width: 100px;
   white-space: nowrap;
   text-align: center;
   font-size: 12px;
}
.table_tr .trs4 {
   width: 90px;
   white-space: nowrap;
   text-align: center;
   font-size: 12px;
}
.table_tr .trs5 {
   width: 70px;
   white-space: nowrap;
   text-align: center;
   font-size: 12px;
}
</style>